<template>
    <el-container>
        <el-header>
            <div class="headerchoose" :style="projectShow==true?'top:158px;':''" v-if="proxy.$route.path.split('/')[proxy.$route.path.split('/').length - 1]!='index'">
                <el-button type="primary" size="small" :text="pictype.toString()=='2'" @click="changepicType(1)">发射机运行图</el-button>
                <el-button type="primary" size="small" :text="pictype.toString()=='1'" @click="changepicType(2)">频率运行图</el-button>
            </div>
            <div class="headerchoose" v-if="projectShow">
                <!-- <el-checkbox disabled>实验</el-checkbox>
                <el-checkbox disabled>对内广播</el-checkbox>
                <el-checkbox disabled style="margin-right:20px;">对外广播</el-checkbox> -->
                <span v-if="projectShow" style="margin-right:5px">调度令: </span>
                <el-select v-if="projectShow" v-model="projectValue" placeholder="请选择调度令" @change="projectChange" style="width: 46%">
                    <el-option v-for="item in project" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span style="margin-right:5px;margin-left:15px">台站选择: </span>
                <el-cascader :disabled="ifstationdisabled" v-model="stationid" class="m-2" :options="deptOptions" @change="cascaderChange()" :props="deptProps" clearable />
            </div>

            <div class="headerDate">
                <div>运行日期:
                    <el-date-picker v-model="runningDate" type="date" placeholder="Pick a day" @change="changeDate">
                        <template #default="cell">
                            <div class="cell" :class="{ current: cell.isCurrent }">
                                <span class="text">{{ cell.text }}</span>
                                <span v-if="isHoliday(cell)" class="holiday" />
                            </div>
                        </template>
                    </el-date-picker>
                </div>
            </div>
        </el-header>
        <el-main style="width: 100%;height:100%">
            <div v-if="ifanimation" class="redlinetext" :style="'margin-left:'+(hfgleft-wywidth -20)+'px;'">
                <span v-if="ifanimation" :style="'display:'+animationText+';'">
                    {{animationStarttimetext}}
                    <!-- {{animationStarttime.getHours()+animationStarttime.getMinutes()+animationStarttime.getSeconds()==0?'23:59:59':animationStarttime.getHours() +':'+animationStarttime.getMinutes()+':'+animationStarttime.getSeconds()}} -->
                </span>
            </div>
            <div v-if="ifanimation" class="redline" :style="'height:'+ hfgheight +'px;margin-left:'+(hfgleft-wywidth-1)+'px;'">
                <div class="circle" :style="'display:'+animationText+';'"></div>
                <div class="line" :style="'display:'+animationText+';'"></div>
            </div>

            <div class="content">
                <el-empty style="height: 100%;" v-if="option.length==0" :description="'暂无数据'" :image-size="100"></el-empty>
                <div v-if="option.length>0" class="row">
                    <div class="timehead">
                        <div style="height: 45px;">UTC</div>
                        <div>BTC</div>
                    </div>
                    <div class="timetext">
                        <div class="timeboder">
                            <div class="timeline" style="margin-left:-4px">
                                <div v-for="(item,index) in [16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" :style="'width:'+ (xwidth_hour) +'px;'">
                                    {{item}}
                                </div>
                            </div>
                            <div class="timeline">
                                <div v-for="(item,index) in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]" class="time timeborder" :style="'width:'+ (xwidth_hour) +'px;'">
                                    <div class="timemiddle" :style="'width:'+ (xwidth_hour/2) +'px;'"></div>
                                </div>

                                <div class="time_end" :style="'width:'+ (xwidth_hour-1) +'px;'">播出</div>
                            </div>
                            <div class="timeline">
                                <div v-for="(item,index) in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]" class="time timeborder2" :style="'width:'+ (xwidth_hour) +'px;'">
                                    <div class="timemiddle" :style="'width:'+ (xwidth_hour/2) +'px;'"></div>
                                </div>
                                <div class="time_end" :style="'width:'+ (xwidth_hour-1) +'px;'">时间</div>
                            </div>
                            <div class="timeline" style="margin-left:-4px">
                                <div v-for="(item,index) in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]" :style="'width:'+ (xwidth_hour) +'px;'">
                                    {{item}}
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div v-if="option.length>0" class="row" v-for="(item,index) in option" :key="index" :style="'height: '+(item.data.length*24+24)+'px;'">

                    <div class="head">{{item.headtext}}</div>
                    <div class="text">
                        <div v-for="(item_detail,detail_index) in item.data" :key="detail_index" class="plan">

                            <div v-for="(fsj,detail_fsj) in item_detail.data" :key="detail_fsj" class="plandetail" :style="'background-color:'+ fsj.color+';margin-left:'+ fsj.left+'px;'+'width:'+ fsj.width+'px;'+ 'position: absolute;' ">

                                <div>
                                    <div class="tip" :style="' transform: translateX(-'+(fsj.left<50?20:70)+'%);'">
                                        <div class="info">
                                            <div>信息:</div><span>{{item_detail.name}}</span>
                                        </div>
                                        <div class="info">
                                            <div>起始时间:</div><span>{{fsj.starttime.split(' ')[1]}}</span>
                                        </div>
                                        <div class="info">
                                            <div>结束时间:</div><span>{{fsj.endtime.split(' ')[1]}}</span>
                                        </div>
                                        <div v-if="fsj.errortime!=undefined" class="errorinfo">
                                            <div class="header">
                                                <span style="width: 150px">起始时间</span>
                                                <span style="width: 150px">结束时间</span>
                                                <span style="width: 100px">备注</span>
                                            </div>
                                            <div class="errortime" v-for="(error,index_error) in fsj.errortime" :key="index_error">
                                                <span style="width: 150px">{{error.starttime}}</span>
                                                <span style="width: 150px">{{error.endtime}}</span>
                                                <span style="width: 100px">{{error.alarmcontent}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="fsj.errortime==undefined" style="width:100%;">
                                        {{fsj.text}}
                                    </div>
                                    <div v-if="fsj.errortime!=undefined" v-for="(error,detail_error) in fsj.errortime" :key="detail_error" :style="'border-radius: 8px;background-color:red;margin-left:'+ error.left+'px !important;'+'width:'+ error.width+'px !important;'">
                                        <div style="padding-left: 10px;">{{error.AlertType}}</div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </el-main>
        <el-footer class="elfooter">
            <el-button size="small" type="primary" plain v-if="showback" @click="back">返回</el-button>
        </el-footer>
    </el-container>

</template>


<script>
//添加anme，可以keepalive 
export default {
    name: 'runganter',
}
</script>

<script setup>
import { reactive, getCurrentInstance, onMounted, ref, computed } from 'vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['back'])

//#region pram
//随机颜色
let colors = ['#F39182', '#63AEE9', '#F1C67E', '#59BDC9', '#DBE1E6'
    , '#F0E2BD', '#A7B9CC', '#5A8026', '#8064A0', '#E6B9B6'
    , '#D9E4BA', '#F0DCDC', '#ECF1DF', '#B3E3FE', '#C7B652'
    , '#F4D26F', '#1CD66C', '#AF4A85', '#FF4E39', '#69A5B7']
//数据json
let option = reactive([])
let optionData = [
    // {
    //     headtext: '英美法96.8',
    //     data: [
    //         {
    //             name: '发射机1',
    //             data: [
    //                 {
    //                     text: 'A01 1-2 fghfghffghfgh',
    //                     starttime: '2022-09-21 01:11:11',
    //                     endtime: '2022-09-21 02:11:11'
    //                 },
    //                 {
    //                     text: 'A01 5-15',
    //                     starttime: '2022-09-21 05:15:15',
    //                     endtime: '2022-09-21 15:15:15',
    //                     errortime: [
    //                         {
    //                             starttime: '2022-09-21 06:15:25',
    //                             endtime: '2022-09-21 06:15:39',
    //                         }
    //                         ,
    //                         {
    //                             starttime: '2022-09-21 09:25:15',
    //                             endtime: '2022-09-21 14:18:35',
    //                         }
    //                     ]
    //                 }
    //             ],

    //         },
    //         {
    //             name: '发射机2',
    //             data: [
    //                 {
    //                     text: 'A02 3-5',
    //                     starttime: '2022-09-21 03:15:15',
    //                     endtime: '2022-09-21 05:15:15',
    //                 }
    //             ],
    //         },
    //         {
    //             name: '发射机3',
    //             data: [
    //                 {
    //                     text: 'A03 16-22',
    //                     starttime: '2022-09-21 16:15:15',
    //                     endtime: '2022-09-21 22:15:15',
    //                 }
    //             ],
    //         }
    //         ,
    //         {
    //             name: '发射机4',
    //             data: [
    //                 {
    //                     text: 'A04 16-22',
    //                     starttime: '2022-09-21 16:15:15',
    //                     endtime: '2022-09-21 22:15:15',
    //                 }
    //             ],
    //         }
    //         ,
    //         {
    //             name: '发射机5',
    //             data: [
    //                 {
    //                     text: 'A05 16-22',
    //                     starttime: '2022-09-21 16:15:15',
    //                     endtime: '2022-09-21 22:15:15',
    //                 }
    //             ],
    //         }
    //         ,
    //         {
    //             name: '发射机6',
    //             data: [
    //                 {
    //                     text: 'A06 16-22',
    //                     starttime: '2022-09-21 16:15:15',
    //                     endtime: '2022-09-21 22:15:15',
    //                 }
    //             ],
    //         }

    //     ]
    // },
    // {
    //     headtext: '日美法98.8',
    //     data: [
    //         {
    //             name: '发射机1',
    //             data: [
    //                 {
    //                     text: 'A01 1-4',
    //                     starttime: '2022-09-21 01:45:45',
    //                     endtime: '2022-09-21 04:45:45',
    //                 },
    //                 {
    //                     text: 'A01 5-7',
    //                     starttime: '2022-09-21 05:45:45',
    //                     endtime: '2022-09-21 07:45:45',
    //                 }
    //             ],

    //         },
    //         {
    //             name: '发射机2',
    //             data: [
    //                 {
    //                     text: 'A02 0-23',
    //                     starttime: '2022-09-21 00:11:45',
    //                     endtime: '2022-09-21 23:45:45',
    //                 }
    //             ],
    //         },
    //         {
    //             name: '发射机3',
    //             data: [
    //                 {
    //                     text: 'A03 6-22',
    //                     starttime: '2022-09-21 06:45:45',
    //                     endtime: '2022-09-21 22:45:45',
    //                 }
    //             ],
    //         }
    //     ]
    // }
]
let test
//是否红线动画
let ifanimation = ref(true)
//时间动画 
let animationText = ref('none')

//宽度位移偏量
let wywidth = ref(60)
let wyheight = ref(140)
//移动红线属性
let hfgleft = ref(110)
let hfgheight = ref(0)

//单位宽度
let xwidth_hour = ref(0) //小时
let xwidth_second = ref(0) //秒

//上一次窗口变化时间
let lastresizetime = null

//动画线程
let animationIntervel = null
//动画计算起始时间
let animationStarttime = ref(new Date())
let animationStarttimetext = ref('')

//0-中心 1-发射机 2-频率 默认0
//let pictype = ref(proxy.$TOOL.data.get("USER_INFO").deptTtype == '台站' ? 1 : 0)
let pictype = ref(proxy.$route.path.split('/')[proxy.$route.path.split('/').length - 1] != 'index' ? 1 : 0)
//原始数据
let orgdata = []
//调度令选择
let projectOrg = []
let project = reactive([])
let projectValue = ref('')
let project_id = ''
let projectShow = ref(true)
//运行日期
let runningDate = ref('')
//有数据的时间范围
let datearry = []
let showback = ref(false)
//台站选择
let deptOptions = reactive([])
let stationid = ref('')
let station_id = -1
let deptProps = ref({
    value: 'id'
})
//上一次查询数据库获取告警
let lastgetalarm = new Date()
//是否执行查询告警
let ifintervalalarm = true
//红线时间增加幅度 单位豪秒
let intervalstep = 60000
let ifinproject = ref(false)
//#endregion


//#region method
//判断是否台站选择可用
let ifstationdisabled = computed(() => {
    return proxy.$TOOL.data.get('USER_INFO').deptTtype == '台站' && !ifinproject.value
})


//格式化显示的红线头时间
let formatAnimotionDate = (date) => {
    if (date.getHours() + date.getMinutes() + date.getSeconds() == 0)
        return '23:59:59'
    else {
        let hh = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
        let mi = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
        let ss = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
        return hh + ':' + mi + ':' + ss
    }
}

//返回
let back = () => {
    emit('back')
}

//日期选择事件
let changeDate = (val) => {

    dealData()
}
//判断是否属于有数据的时间日期
let isHoliday = ({ dayjs }) => {
    return datearry.includes(dayjs.format('YYYY-MM-DD') + ' 00:00:00')
}

//原始数据处理 按照时间每天一个集合
let dealOrgData = (data) => {
    orgdata = []
    //获取日期数组
    datearry = []

    optionData = []
    option.length = 0
    clearTimeout(animationIntervel)
    animationIntervel = null

    animationText.value = 'none'
    animationStarttime.value = new Date(runningDate.value)
    hfgheight.value = 0
    proxy.$forceUpdate()


    if (data.length > 0) {
        //跨天数据存放
        let overDay = []
        function dealvoerDay(_newdata, _nextdate) {
            for (var i = 1; i <= 5; i++) {
                //涉及到跨天
                if (_newdata['StartTime' + i].substring(0, 8) != '00:00:00' && (Number(_newdata['EndTime' + i].split(':')[0]) < Number(_newdata['StartTime' + i].split(':')[0]))) {
                    let newdt = new Date(proxy.$TOOL.dateFormat(_nextdate, 'yyyy-MM-dd hh:mm:ss'))

                    overDay.push({
                        DataID: _newdata.DataID,
                        date: proxy.$TOOL.dateFormat(new Date(newdt.setDate(_nextdate.getDate() + 1)), 'yyyy-MM-dd') + ' 00:00:00',
                        s: '00:00:00',
                        e: _newdata['EndTime' + i],
                        row: _newdata
                    })

                    _newdata['EndTime' + i] = '23:59:59'
                }
            }
            return _newdata
        }

        let mindate = ''
        let maxdate = ''
        for (var i = 0; i < data.length; i++) {
            if (i == 0) {
                mindate = data[0].RepeatDateBegin
                maxdate = data[0].RepeatDateEnd
            }
            else {
                if (new Date(data[i].RepeatDateBegin) < new Date(mindate))
                    mindate = data[i].RepeatDateBegin
                if (new Date(data[i].RepeatDateEnd) > new Date(maxdate))
                    maxdate = data[i].RepeatDateEnd
            }
        }
        let nextdate = new Date(mindate)
        while (nextdate <= new Date(maxdate)) {

            datearry.push(proxy.$TOOL.dateFormat(nextdate, 'yyyy-MM-dd hh:mm:ss'))
            nextdate = new Date(nextdate.setDate(nextdate.getDate() + 1));
        }
        //初始化原始数据
        datearry.forEach(element => {
            orgdata.push({
                date: element,
                option: []
            })
        });

        //开始逐条解析插入orgdata对应的时间集里
        for (var t = 0; t < data.length; t++) {
            let element = data[t]
            let nextdate = new Date(element.RepeatDateBegin)
            //起始时间区间逐天判断
            while (nextdate <= new Date(element.RepeatDateEnd)) {
                let newdata = {}
                Object.assign(newdata, element)
                if (element.RepeatType == 0) {
                    //每天重复 

                    newdata = dealvoerDay(newdata, nextdate)

                    //插入
                    orgdata.forEach(org => {
                        if (org.date == proxy.$TOOL.dateFormat(nextdate, 'yyyy-MM-dd hh:mm:ss'))
                            org.option.push(newdata)
                    });
                }
                else if (element.RepeatType == 1) {
                    //每周重复

                    let currentweek = getWeekDate(proxy.$TOOL.dateFormat(nextdate, 'yyyy-MM-dd hh:mm:ss'))
                    if (element.RepeatWeek.indexOf(currentweek) >= 0) {

                        newdata = dealvoerDay(newdata, nextdate)

                        //插入
                        orgdata.forEach(org => {
                            if (org.date == proxy.$TOOL.dateFormat(nextdate, 'yyyy-MM-dd hh:mm:ss'))
                                org.option.push(newdata)
                        });
                    }
                }
                else if (element.RepeatType == 2) {
                    //每月重复
                    let currentday = nextdate.getDate();

                    if ((',' + element.RepeatMonth + ',').indexOf(',' + currentday + ',') >= 0) {
                        newdata = dealvoerDay(newdata, nextdate)
                        //插入
                        orgdata.forEach(org => {
                            if (org.date == proxy.$TOOL.dateFormat(nextdate, 'yyyy-MM-dd hh:mm:ss'))
                                org.option.push(newdata)
                        });
                    }
                }
                else if (element.RepeatType == 3) {
                    //指定日期
                    if (element.RepeatDateList.length > 0) {
                        let result = false
                        element.RepeatDateList.split(',').forEach(element => {
                            if (new Date(element) == nextdate) {
                                result = true
                            }
                        });
                        if (result) {
                            newdata = dealvoerDay(newdata, nextdate)
                            //插入
                            orgdata.forEach(org => {
                                if (org.date == proxy.$TOOL.dateFormat(nextdate, 'yyyy-MM-dd hh:mm:ss'))
                                    org.option.push(newdata)
                            });
                        }
                    }

                }
                nextdate = new Date(nextdate.setDate(nextdate.getDate() + 1));
            }
        }

        //处理跨天数据
        if (overDay.length > 0) {
            overDay.forEach(element => {

                let rows = orgdata.filter(row => row.date == element.date)

                if (rows.length > 0) {
                    let detailrows = rows[0].option.filter(row => row.DataID == element.DataID)
                    if (detailrows.length > 0) {

                        if (detailrows[0]['time_k'] != undefined)
                            detailrows[0]['time_k'].push({
                                s: element.s,
                                e: element.e
                            })
                        else
                            detailrows[0]['time_k'] = [{
                                s: element.s,
                                e: element.e
                            }]
                    }
                    else {
                        //跨天到没有安排调度的日期，日期集合在但详单不存在

                        element.row.StartTime1 = '00:00:00'
                        element.row.StartTime2 = '00:00:00'
                        element.row.StartTime3 = '00:00:00'
                        element.row.StartTime4 = '00:00:00'
                        element.row.StartTime5 = '00:00:00'
                        element.row.EndTime1 = '00:00:00'
                        element.row.EndTime2 = '00:00:00'
                        element.row.EndTime3 = '00:00:00'
                        element.row.EndTime4 = '00:00:00'
                        element.row.EndTime5 = '00:00:00'
                        if (element.row['time_k'] != undefined)
                            element.row['time_k'].push({
                                s: element.row.s,
                                e: element.row.e
                            })
                        else
                            element.row['time_k'] = [{
                                s: element.row.s,
                                e: element.row.e
                            }]
                        rows[0].option.push(element.row)
                    }

                }
                else {
                    //跨天到没有安排调度的日期，日期集合不存在
                    let newjson = {
                        date: element.date,
                        option: []
                    }

                    element.row.StartTime1 = '00:00:00'
                    element.row.StartTime2 = '00:00:00'
                    element.row.StartTime3 = '00:00:00'
                    element.row.StartTime4 = '00:00:00'
                    element.row.StartTime5 = '00:00:00'
                    element.row.EndTime1 = '00:00:00'
                    element.row.EndTime2 = '00:00:00'
                    element.row.EndTime3 = '00:00:00'
                    element.row.EndTime4 = '00:00:00'
                    element.row.EndTime5 = '00:00:00'
                    if (element.row['time_k'] != undefined)
                        element.row['time_k'].push({
                            s: element.row.s,
                            e: element.row.e
                        })
                    else
                        element.row['time_k'] = [{
                            s: element.row.s,
                            e: element.row.e
                        }]
                    newjson.option.push(element.row)
                    orgdata.push(newjson)
                }
            });
        }

        //默认选数组第一条
        if (orgdata.length > 0)
            runningDate.value = orgdata[0].date

        dealData()
    }
    else {

    }

}
//获取周几
let getWeekDate = (datestring) => {
    var weeks = new Array("0", "1", "2", "3", "4", "5", "6");
    var now = new Date(datestring);
    var day = now.getDay();
    var week = weeks[day];
    return week;
}

//处理数据生成option
let dealData = async () => {
    optionData = []
    let orgdata_new = []
    intervalstep = 60000
    clearTimeout(animationIntervel)
    animationIntervel = null
    animationText.value = 'none'

    animationStarttime.value = new Date(runningDate.value)
    hfgheight.value = 0
    proxy.$forceUpdate()

    orgdata_new = orgdata.filter(el => proxy.$TOOL.dateFormat(new Date(el.date), 'yyyy-MM-dd') == proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd'))


    if (orgdata_new.length > 0) {
        orgdata_new = orgdata_new[0].option

        if (station_id != -1) {
            orgdata_new = orgdata_new.filter(el => el.StationID == station_id)
        }
        // console.log(pictype.value, proxy.$route.path.split('/')[proxy.$route.path.split('/').length - 1]);
        if (pictype.value == 0) {
            //提取台站ID
            var stations = [];

            orgdata_new.forEach(element => {

                let rows = stations.filter(obj => obj.StationID == element.StationID)

                if (rows.length == 0)
                    stations.push({
                        StationID: element.StationID,
                        StationName: element.StationName,
                    })
            });

            stations.forEach(element => {
                let rowjson = {
                    headtext: element.StationName,
                    StationID: element.StationID,
                    data: []
                }
                let rows = orgdata_new.filter(obj => obj.StationID == element.StationID)

                for (var i = 0; i < rows.length; i++) {
                    let TransmitterNumber = rows[i]["TransmitterNumber"] == null ? '(默认)' : rows[i]["TransmitterNumber"]
                    let Capacity = rows[i]["Capacity"] == null ? '(默认)' : rows[i]["Capacity"]
                    let detailjson = {
                        name: '机号:' + TransmitterNumber + ' 功率:' + Capacity + ' 频率:' + rows[i]["Frequency"],
                        rowdata: rows[i],
                        data: [
                            //  {
                            //     text: '',
                            //     starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime1"],
                            //     endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime1"],
                            //     kt: false
                            // }
                            // ,
                            // {
                            //     text: '',
                            //     starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime2"],
                            //     endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime2"],
                            //     kt: false
                            // },
                            // {
                            //     text: '',
                            //     starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime3"],
                            //     endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime3"],
                            //     kt: false
                            // },
                            // {
                            //     text: '',
                            //     starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime4"],
                            //     endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime4"],
                            //     kt: false
                            // },
                            // {
                            //     text: '',
                            //     starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime5"],
                            //     endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime5"],
                            //     kt: false
                            // },
                        ],

                    }
                    for (var j = 1; j < 6; j++) {
                        if (!(rows[i]["StartTime" + j] == '00:00:00' && rows[i]["EndTime" + j] == '00:00:00'))
                            detailjson.data.push({
                                text: '',
                                starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime" + j],
                                endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime" + j],
                                kt: false
                            })
                    }

                    if (rows[i]['time_k'] != undefined) {
                        rows[i]['time_k'].forEach(element => {
                            detailjson.data.push(
                                {
                                    text: '',
                                    starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + element.s,
                                    endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + element.e,
                                    kt: true
                                }
                            )
                        });
                    }

                    rowjson.data.push(detailjson)
                }
                optionData.push(rowjson)
            });
        }
        else if (pictype.value == 1) {
            //提取机号 
            var Transmitter = [];
            orgdata_new.forEach(element => {

                let rows = Transmitter.filter(obj => obj.TransmitterNumber == element.TransmitterNumber)

                if (rows.length == 0)
                    Transmitter.push({
                        TransmitterNumber: element.TransmitterNumber,//机号
                        Capacity: element.Capacity,//功率
                    })
            });
            Transmitter.forEach(element => {

                let TransmitterNumber = element.TransmitterNumber == null ? '(默认)' : element.TransmitterNumber
                let Capacity = element.Capacity == null ? '(默认)' : element.Capacity

                let rowjson = {
                    headtext: '机号:' + TransmitterNumber + ' 功率:' + Capacity,
                    data: []
                }
                let rows = orgdata_new.filter(obj => obj.TransmitterNumber == element.TransmitterNumber)

                for (var i = 0; i < rows.length; i++) {
                    let repeatestring = ''
                    if (rows[i]["RepeatType"].toString() == '0')
                        repeatestring = '每天'
                    if (rows[i]["RepeatType"].toString() == '1')
                        repeatestring = '每周(' + rows[i]["RepeatWeek"] + ")"
                    if (rows[i]["RepeatType"].toString() == '2')
                        repeatestring = '每月(' + rows[i]["RepeatMonth"] + ")"
                    if (rows[i]["RepeatType"].toString() == '3')
                        repeatestring = '指定日期(' + rows[i]["RepeatDateList"] + ")"

                    let detailjson = {
                        name: '频率:' + rows[i]["Frequency"] + ' 语言:' + rows[i]["Language"] + ' 周期:' + repeatestring,
                        rowdata: rows[i],
                        data: [

                        ],

                    }
                    for (var j = 1; j < 6; j++) {
                        if (!(rows[i]["StartTime" + j] == '00:00:00' && rows[i]["EndTime" + j] == '00:00:00'))
                            detailjson.data.push({
                                text: '',
                                starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime" + j],
                                endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime" + j],
                                kt: false
                            })
                    }
                    if (rows[i]['time_k'] != undefined) {
                        rows[i]['time_k'].forEach(element => {
                            detailjson.data.push(
                                {
                                    text: '',
                                    starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + element.s,
                                    endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + element.e,
                                    kt: true
                                }
                            )
                        });
                    }
                    rowjson.data.push(detailjson)
                }
                optionData.push(rowjson)
            });
        }
        else if (pictype.value == 2) {
            //提取频率
            var Fre = [];
            orgdata_new.forEach(element => {

                let rows = Fre.filter(obj => obj.Frequency == element.Frequency)

                if (rows.length == 0)
                    Fre.push({
                        Frequency: element.Frequency,//频率

                    })
            });
            Fre.forEach(element => {
                let rowjson = {
                    headtext: '频率:' + element.Frequency,
                    data: []
                }
                let rows = orgdata_new.filter(obj => obj.Frequency == element.Frequency)

                for (var i = 0; i < rows.length; i++) {
                    let repeatestring = ''
                    if (rows[i]["RepeatType"].toString() == '0')
                        repeatestring = '每天'
                    if (rows[i]["RepeatType"].toString() == '1')
                        repeatestring = '每周(' + rows[i]["RepeatWeek"] + ")"
                    if (rows[i]["RepeatType"].toString() == '2')
                        repeatestring = '每月(' + rows[i]["RepeatMonth"] + ")"
                    if (rows[i]["RepeatType"].toString() == '3')
                        repeatestring = '指定日期(' + rows[i]["RepeatDateList"] + ")"


                    let TransmitterNumber = rows[i]["TransmitterNumber"] == null ? '(默认)' : rows[i]["TransmitterNumber"]

                    let detailjson = {
                        name: '机号:' + TransmitterNumber + ' 语言:' + rows[i]["Language"] + ' 周期:' + repeatestring,
                        rowdata: rows[i],
                        data: [

                        ],

                    }
                    for (var j = 1; j < 6; j++) {
                        if (!(rows[i]["StartTime" + j] == '00:00:00' && rows[i]["EndTime" + j] == '00:00:00'))
                            detailjson.data.push({
                                text: '',
                                starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["StartTime" + j],
                                endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + rows[i]["EndTime" + j],
                                kt: false
                            })
                    }
                    if (rows[i]['time_k'] != undefined) {
                        rows[i]['time_k'].forEach(element => {
                            detailjson.data.push(
                                {
                                    text: '',
                                    starttime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + element.s,
                                    endtime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + element.e,
                                    kt: true
                                }
                            )
                        });
                    }
                    rowjson.data.push(detailjson)
                }
                optionData.push(rowjson)
            });
        }
        initWidth()
        initOption()


        if (ifanimation.value && orgdata_new.length > 0) {
            animationText.value = 'block'
            animationStarttime.value = new Date(runningDate.value)
            lastgetalarm = new Date(runningDate.value)
            ifintervalalarm = true
            await dealError()

            if (!animationIntervel)
                animationIntervel = setInterval(() => {
                    animationFun()
                }, 5);

        }

    }
    else
        option.length = 0
}

//判断所选的调度令当前账户是否有查看所有台站的权限
let checkAccount = (projectdata) => {

    if (projectdata.Auditor == proxy.$TOOL.data.get("USER_INFO").userId.toString() ||
        projectdata.ProjectAuditor == proxy.$TOOL.data.get("USER_INFO").userId.toString() ||
        projectdata.ProjectAuditor2 == proxy.$TOOL.data.get("USER_INFO").userId.toString() ||
        projectdata.ProjectSender == proxy.$TOOL.data.get("USER_INFO").userId.toString() ||
        projectdata.ProjectSign == proxy.$TOOL.data.get("USER_INFO").userId.toString()
    )
        ifinproject.value = true
    else
        ifinproject.value = false
}

//调度令选择事件
let projectChange = async (value) => {
    ifanimation.value = true
    showback.value = false
    project_id = value
    let filterdata = projectOrg.filter(row => row.ProjectID == value)
    if (filterdata.length > 0) {
        let postdata = filterdata[0]
        checkAccount(postdata)
        console.log(ifinproject.value);
        postdata.deptTtype = proxy.$TOOL.data.get("USER_INFO").deptTtype
        if (postdata.deptTtype == '中心' || ifinproject.value) {
            if (station_id != -1)
                postdata.StationID = station_id
        } else
            postdata.StationID = proxy.$TOOL.data.get("USER_INFO").deptId

        let result = await proxy.$API.order.plan.get(postdata)

        if (result.code == 200) {
            dealOrgData(result.data.rows)
        }
        else
            proxy.$alert(result.message, "异常", { type: 'error' })
    }
    else {
        proxy.$alert('', "异常", { type: 'error' })

    }
}
//台站级联组件选择事件
let cascaderChange = async (val) => {
    console.log(stationid.value);
    if (stationid.value == null)
        station_id = -1
    else {
        if (stationid.value[1] != undefined)
            station_id = stationid.value[1]
        else
            station_id = stationid.value[0]
    }
    if (project_id != '') {
        dealData()
    }
}

let changepicType = (type) => {
    pictype.value = type
    dealData()
}

//计算宽度和居左距离
let initWidth = () => {
    hfgheight.value = 0
    animationText.value = 'none'
    xwidth_hour.value = document.getElementsByClassName('content')[0].offsetWidth || window.innerWidth || document.body.clientWidth
    if (showback.value)
        xwidth_hour.value = xwidth_hour.value - 255
    xwidth_hour.value = (xwidth_hour.value - 130 - wywidth.value) / 24
    xwidth_second.value = xwidth_hour.value / 60 / 60
}
//数据预处理
let initOption = () => {

    //清空option数据再push
    option.splice(0, option.length)
    option.push(...optionData)
    //console.log(option);
    for (let i = 0; i < optionData.length; i++) {

        hfgheight.value += optionData[i].data.length * 24 + 28
        let random_color = colors[Math.round(Math.random() * 20)]
        for (let j = 0; j < optionData[i].data.length; j++) {

            for (let t = 0; t < optionData[i].data[j].data.length; t++) {
                //获取随机颜色
                option[i].data[j].data[t]['color'] = random_color//colors[Math.round(Math.random() * 20)];
                if (option[i].data[j].data[t]['color'] == undefined)
                    option[i].data[j].data[t]['color'] = colors[0]

                //跨天计划另配色
                if (option[i].data[j].data[t]['kt'] != undefined)
                    if (option[i].data[j].data[t]['kt'])
                        option[i].data[j].data[t]['color'] = colors[Math.round(Math.random() * 20)]

                //计算宽度
                if (ifanimation.value)
                    option[i].data[j].data[t]['width'] = 0
                else
                    option[i].data[j].data[t]['width'] = xwidth_second.value * ((new Date(optionData[i].data[j].data[t].endtime) - new Date(optionData[i].data[j].data[t].starttime)) / 1000)


                let time = new Date(optionData[i].data[j].data[t].starttime)
                option[i].data[j].data[t]['left'] = xwidth_second.value * (time.getHours() * 3600 + time.getMinutes() * 60 + time.getSeconds())

                if (option[i].data[j].data[t]['errortime'] != undefined) {
                    for (let m = 0; m < optionData[i].data[j].data[t]['errortime'].length; m++) {
                        //tip提示框动态高度
                        option[i].data[j].data[t]['tipheight'] = 60 * optionData[i].data[j].data[t]['errortime'].length + 40 + 130

                        //计算异常时间宽度
                        if (ifanimation.value)
                            option[i].data[j].data[t]['errortime'][m]['width'] = 0
                        else
                            option[i].data[j].data[t]['errortime'][m]['width'] = xwidth_second.value * ((new Date(optionData[i].data[j].data[t]['errortime'][m].endtime) - new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) / 1000)

                        if (m == 0)
                            option[i].data[j].data[t]['errortime'][m]['left'] = xwidth_second.value * ((new Date(optionData[i].data[j].data[t]['errortime'][m].starttime) - new Date(optionData[i].data[j].data[t].starttime)) / 1000)
                        else
                            option[i].data[j].data[t]['errortime'][m]['left'] = xwidth_second.value * ((new Date(optionData[i].data[j].data[t]['errortime'][m].starttime) - new Date(optionData[i].data[j].data[t]['errortime'][m - 1].endtime)) / 1000)

                    }
                }
                else
                    option[i].data[j].data[t]['tipheight'] = 160

            }
        }
    }
    hfgheight.value += 60
}

//查询异常数据处理(测试)
let dealError = async () => {
    return new Promise(async (resolve, reject) => {
        try {
            let stationids = ''
            let orgdata_new = orgdata.filter(el => proxy.$TOOL.dateFormat(new Date(el.date), 'yyyy-MM-dd') == proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd'))
            if (orgdata_new.length > 0) {

                if (orgdata_new[0].option.length > 0) {

                    orgdata_new[0].option.forEach(element => {
                        if (stationids.indexOf(',' + element.StationID) < 0)
                            stationids += ',' + element.StationID
                    });

                    if (ifintervalalarm) {
                        lastgetalarm = animationStarttime.value
                        let pram = {
                            datetime: proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd'),
                            stationids: stationids.substring(1)
                        }

                        let result = await proxy.$API.order.getalarm.get(pram)
                        console.log(result);
                        if (result.code == 200) {

                            if (result.data.length > 0) {
                                dealErrorOption(result.data)
                            }
                        }
                    }


                }
            }
            resolve('0')
        } catch (ex) {
            console.log(ex);
            reject(ex)
        }
    }).catch(error => { })

}
//处理异常告警
let dealErrorOption = (errordata) => {

    for (let i = 0; i < optionData.length; i++) {

        for (let j = 0; j < optionData[i].data.length; j++) {

            if (optionData[i].data[j].rowdata != undefined) {
                console.log(errordata);
                console.log(optionData[i].data[j].rowdata);
                let erdata = errordata.filter(row => row.StationID == optionData[i].data[j].rowdata.StationID
                    && row.TransmitterNumber == optionData[i].data[j].rowdata.TransmitterNumber
                    && row.Frequency == optionData[i].data[j].rowdata.Frequency
                    && row.Capacity == optionData[i].data[j].rowdata.Capacity
                    && row.StartTime != '')//

                //有告警
                if (erdata.length > 0) {

                    erdata.forEach(element => {
                        element.EndTime == '' ? proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' 23:59:59' : element.EndTime
                        for (let t = 0; t < optionData[i].data[j].data.length; t++) {

                            let erjson = [{
                                AlertType: element.AlertType,
                                alarmcontent: element.AlertContent,
                                width: 0,
                                starttime: element.StartTime,
                                endtime: element.EndTime,
                                left: xwidth_second.value * ((new Date(element.StartTime) - new Date(optionData[i].data[j].data[t].starttime)) / 1000)
                            }]
                            option[i].data[j].data[t]['errortime'] = erjson

                            option[i].data[j].data[t]['tipheight'] = 190

                        }
                    });

                    //计算异常故障宽度
                    for (let t = 0; t < optionData[i].data[j].data.length; t++) {
                        if (option[i].data[j].data[t]['errortime'] != undefined) {
                            for (let m = 0; m < optionData[i].data[j].data[t]['errortime'].length; m++) {
                                //异常时间段大红色标注
                                if (animationStarttime.value <= new Date(optionData[i].data[j].data[t]['errortime'][m].endtime) && animationStarttime.value >= new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) {
                                    //计算异常时间宽度

                                    option[i].data[j].data[t]['errortime'][m]['width'] = xwidth_second.value * ((animationStarttime.value - new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) / 1000)
                                }
                                else {
                                    if (animationStarttime.value > new Date(optionData[i].data[j].data[t]['errortime'][m].endtime)) {

                                        option[i].data[j].data[t]['errortime'][m]['width'] = xwidth_second.value * (new Date(optionData[i].data[j].data[t]['errortime'][m].endtime) - new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) / 1000
                                    }

                                }
                            }
                        }
                    }
                }

            }

        }
    }
}

//窗口变化事件 2秒内部让重复刷新 避免函数自动刷新N次
window.onresize = async () => {

    lastresizetime = new Date()
    initWidth()
    initOption()
    proxy.$forceUpdate()

    clearTimeout(animationIntervel)
    animationIntervel = null

    if (ifanimation.value) {
        animationText.value = 'block'
        animationStarttime.value = new Date(runningDate.value)
        lastgetalarm = new Date(runningDate.value)
        ifintervalalarm = true
        await dealError()

        if (!animationIntervel)
            animationIntervel = setInterval(() => {
                animationFun()
            }, 5);

    }

}

//动画函数
let animationFun = async () => {


    // //如果是未来的时间就不执行
    // if (proxy.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd') < proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd')) {
    //     console.log('clear');
    //     clearTimeout(animationIntervel)
    //     animationIntervel = null

    //     return
    // }

    //处理告警 控制下 每隔一段时间再查询告警
    if ((animationStarttime.value - lastgetalarm) / 1000 > 600)
        await dealError()

    if (animationStarttime.value >= new Date(proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' ' + proxy.$TOOL.dateFormat(new Date(), 'hh:mm:ss'))
        && proxy.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd') == proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd')) {
        // console.log(option);
        ifintervalalarm = true

        intervalstep = 5
        animation()
    }
    else {
        ifintervalalarm = false
        //运行一天结束
        if (animationStarttime.value >= new Date(proxy.$TOOL.dateFormat(new Date(runningDate.value), 'yyyy-MM-dd') + ' 23:59:59')) {
            //if (animationStarttime.value > new Date('2022-10-30 10:59:59')) {

            clearTimeout(animationIntervel)
            animationIntervel = null

            console.log('clear');
        }
        else
            animation()
    }

}
let animation = () => {
    for (let i = 0; i < optionData.length; i++) {

        for (let j = 0; j < optionData[i].data.length; j++) {

            for (let t = 0; t < optionData[i].data[j].data.length; t++) {
                if (animationStarttime.value <= new Date(optionData[i].data[j].data[t].endtime) && animationStarttime.value >= new Date(optionData[i].data[j].data[t].starttime)) {
                    //计算宽度
                    option[i].data[j].data[t]['width'] = xwidth_second.value * ((animationStarttime.value - new Date(optionData[i].data[j].data[t].starttime)) / 1000)
                }

                if (option[i].data[j].data[t]['errortime'] != undefined) {
                    for (let m = 0; m < optionData[i].data[j].data[t]['errortime'].length; m++) {
                        //异常时间段大红色标注
                        if (animationStarttime.value <= new Date(optionData[i].data[j].data[t]['errortime'][m].endtime) && animationStarttime.value >= new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) {
                            //计算异常时间宽度

                            option[i].data[j].data[t]['errortime'][m]['width'] = xwidth_second.value * ((animationStarttime.value - new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) / 1000)
                        }
                        else {
                            if (animationStarttime.value > new Date(optionData[i].data[j].data[t]['errortime'][m].endtime)) {

                                option[i].data[j].data[t]['errortime'][m]['width'] = xwidth_second.value * (new Date(optionData[i].data[j].data[t]['errortime'][m].endtime) - new Date(optionData[i].data[j].data[t]['errortime'][m].starttime)) / 1000
                            }

                        }
                    }
                }

            }
        }
    }

    //红色分割线动画
    hfgleft.value = wywidth.value + 120 + xwidth_second.value * ((animationStarttime.value - new Date(runningDate.value)) / 1000)
    //一分钟间隔
    let mse = animationStarttime.value.getTime()
    animationStarttime.value = new Date(mse + intervalstep)
    // animationStarttime.value = animationStarttime.value.setSeconds(animationStarttime.value.getSeconds() + intervalstep);

    animationStarttime.value = new Date(animationStarttime.value);
    animationStarttimetext.value = formatAnimotionDate(animationStarttime.value)
}

//页面赋值
let setData = (data) => {
    let distinctid = []
    data.forEach(element => {
        if (distinctid.indexOf(element.StationID) < 0)
            distinctid.push(element.StationID)
    });

    if (distinctid.length > 1)
        pictype.value = 0 //多台站就切换成中心浏览模式
    ifanimation.value = false
    projectShow.value = false
    showback.value = true
    dealOrgData(data)

}


onMounted(async () => {


    let currenttime = proxy.$TOOL.dateFormat(new Date(new Date().setDate(new Date().getDate() + 30)), 'yyyy-MM-dd hh:mm:ss')
    let lasttime = proxy.$TOOL.dateFormat(new Date(new Date() - 1000 * 60 * 60 * 24 * 30), 'yyyy-MM-dd hh:mm:ss')

    let params = {
        keyword: '',
        starttime: lasttime,
        endtime: currenttime,
        status: { type: "1, 2, 3, 4, 5" },
        deptTtype: proxy.$TOOL.data.get("USER_INFO").deptTtype,//部门ID
        deptId: proxy.$TOOL.data.get("USER_INFO").deptId,//部门ID
        userId: proxy.$TOOL.data.get("USER_INFO").userId,//用户ID
    }

    let result = await proxy.$API.order.list.get(params)

    if (result.code == 200) {
        projectOrg.push(...result.data.rows)
        result.data.rows.forEach(element => {
            project.push({
                value: element.ProjectID,
                label: element.ProjectSerrial + '_' + element.ProjectName,

            })
        });

    }
    else
        proxy.$alert(result.message, "获取调度令清单异常", { type: 'error' })

    let deptlist = await proxy.$API.system.dept.list.get()
    if (deptlist.code == 200) {
        deptlist.data.forEach(element => {
            if (element.children.length == 0)
                element.disabled = true
        });
        deptOptions.push({
            id: -1,
            label: '全部',
        })
        deptOptions.push(...deptlist.data)
        if (proxy.$TOOL.data.get('USER_INFO').deptTtype == '台站') {
            for (var i = 0; i < deptOptions.length; i++) {
                if (deptOptions[i].children != undefined) {
                    for (var t = 0; t < deptOptions[i].children.length; t++) {
                        if (deptOptions[i].children[t].id == proxy.$TOOL.data.get("USER_INFO").deptId)
                            stationid.value = deptOptions[i].children[t].id
                    }
                }

            }
        }

    }
    else
        proxy.$alert(result.message, "获取调度令清单异常", { type: 'error' })


})

//#endregion
//暴露的方法函数
defineExpose({ setData })
</script>

<style lang="scss"  scoped>
.headerchoose {
    position: absolute;
    z-index: 99;
    width: 700px;
    height: 30px;
    margin-left: 10px;
}

.headerDate {
    position: absolute;
    z-index: 1999;
    //width: 95%;
    height: 30px;
    display: flex;
    right: 30px !important;
    flex-direction: row-reverse;
}

.tip {
    background-color: white;
    display: none;
    width: 0px;

    box-shadow: 0px 0px 20px 0px #a5a4a4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    .info {
        margin-bottom: 20px;

        div {
            width: 100px;
            font-size: 14px;
        }
        span {
            color: #8c8c8c;
            width: 100%;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-color: #0f0f0f;
        }
    }
    .errorinfo {
        width: 100%;
        display: flex;
        flex-direction: column;
        .header {
            padding-top: 12px;
            width: 100%;
            display: flex;
            align-items: center;
            height: 40px;
            color: #565656;
            font-weight: 600;
            border-bottom: 1px solid #dcdcdc;
        }
        .errortime {
            display: flex;
            align-items: center;
            height: 64px;
            font-weight: 400;
            border-bottom: 1px solid #dcdcdc;
            width: 100%;
        }
    }
}

.redlinetext {
    position: absolute;
    z-index: 1000;
    width: 60px;
    height: 20px;
    top: 172px;
}
.redline {
    position: absolute;
    z-index: 1000;
    width: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    top: 190px;
    .circle {
        background: red;
        border-radius: 50%;
        height: 6px;
        width: 6px;
    }
    .line {
        width: 1px;
        height: 100%;
        background-color: red;
    }
}

.content {
    // height: 100%;
    // width: calc(100% - 20px);
    height: calc(100% - 210px);
    width: calc(100% - 248px);
    padding: 15px 10px 10px 10px;
    display: flex;

    //margin: 30px 10px 10px 10px;
    flex-direction: column;
    position: absolute;
    .row {
        padding-top: 10px;

        width: calc(100% - 0px);
        display: flex;
        .head {
            height: 100%;
            width: 120px !important;
            // border-right-style: solid;
            // border-right-width: 1;
            // border-color: rgb(240, 240, 240);
            background-color: #e8e8e8;

            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
        }
        .text {
            height: 100%;
            width: 100%;

            background-color: rgb(255, 255, 255);
            border-top-style: solid;
            border-top-width: 1;

            border-color: #e8e8e8;

            .plan {
                height: 20px;
                width: 100%;
                margin-bottom: 3px;
                display: flex;
                flex-direction: row;
                .plandetail {
                    height: 20px;
                    cursor: pointer;

                    //position: relative;
                    // border: 1px solid #272626;
                    border-radius: 8px;
                    margin-top: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: flex;
                    div {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        display: flex;
                    }
                    &:hover {
                        box-shadow: 0px 0px 7px 1px #473c3c;
                        .tip {
                            display: block;
                            position: fixed;
                            z-index: 10000;
                            margin-top: 26px !important;
                            margin-top: 20px;

                            width: 450px;

                            padding: 5px;
                            display: flex;
                            padding: 20px;
                            flex-direction: column;
                        }
                    }
                }
            }
        }
        .timetext {
            height: 100%;
            width: 100%;
            .timeboder {
                height: 100%;
                width: 100%;

                .timeline {
                    width: 100%;
                    height: 15px;
                    display: flex;
                    .timemiddle {
                        border-right-style: dotted;
                        border-right-width: 1px;
                        height: 8px;
                    }
                    .timeborder {
                        border-bottom-style: solid;
                        border-bottom-width: 1px;
                        border-left-style: dotted;
                        border-left-width: 1px;
                    }
                    .timeborder2 {
                        border-left-style: dotted;
                        border-left-width: 1px;
                        display: flex !important;
                        align-items: flex-start !important;
                    }
                    .time {
                        display: flex;
                        flex-direction: row;
                        /* justify-content: flex-end; */
                        align-items: flex-end;
                    }
                    .time_end {
                        border-left-style: dotted;
                        border-left-width: 1px;
                        display: flex;
                        //flex-direction: row;
                        flex-direction: row-reverse;
                        align-items: flex-end;
                    }
                }
            }
        }
        .timehead {
            height: 100%;
            width: 120px !important;
            margin-left: 0px;
            padding-right: 10px;
            // border-style: solid;
            // border-width: 1;
            // border-color: rgb(240, 240, 240);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            flex-direction: column;
            align-content: flex-end;
        }
    }
}

.cell {
    height: 30px;
    padding: 3px 0;
    box-sizing: border-box;
}
.cell .text {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}
.cell.current .text {
    background: #626aef;
    color: #fff;
}
.cell .holiday {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}
</style>